import { Column } from '@antv/g2plot'
import { useEffect, useState } from 'react'

import styles from './ironInventory.module.less'

const inventoryMap = {
  iron: 'inventory-iron',
  pack: 'inventory-pack',
  check: 'inventory-check'
}

export default (props) => {
  const { data, areaStockQty, field } = props
  const [chart, setChart] = useState<any>()

  // 库存量
  useEffect(() => {
    // if (data && data.length) {

    const columnPlot = new Column(`inventory-${field}`, {
      data: [],
      width: 500,
      isStack: true,
      autoFit: true,
      padding: [16, 12, 32, 32],
      xField: 'area',
      yField: 'value',
      seriesField: 'type',
      label: null,
      color: (value) => {
        if (value.type === 'Total') {
          return '#072C88'
        }
        if (value.type === 'Full') {
          return '#DD2A2A'
        }
        if (value.type === 'Large') {
          return '#F7B500'
        }
        return '#0EC5DF'
      },
      legend: false,
      tooltip: false,
      xAxis: {
        label: {
          autoHide: true,
          autoRotate: false,
          style: {
            lineHeight: 20,
            fontSize: 16,
            fill: '#FFFFFF'
          }
        },
        tickLine: null
      },
      yAxis: {
        range: [0, 0.88],
        title: {
          text: '件数',
          autoRotate: false,
          position: 'end',
          offset: 12,
          style: {
            fontSize: 16,
            fill: '#FFFFFF'
          }
        },
        label: {
          style: {
            fontSize: 16,
            fill: '#FFFFFF'
          }
        },
        grid: {
          line: {
            style: {
              lineWidth: 1,
              lineDash: [2, 5]
            }
          }
        }
      },
      // maxColumnWidth: 48,
      // minColumnWidth: 48,
      annotations: []
    })

    columnPlot.render()
    setChart(columnPlot)
  }, [])

  useEffect(() => {
    if (chart) {
      const barData = []
      data.forEach((item) => {
        barData.push({
          area: item.locationCode,
          value:
            item.capacity - item.stockQty < 0
              ? 0
              : item.capacity - item.stockQty,
          capacity: item.capacity,
          type: 'Total'
        })
      })

      data.forEach((item) => {
        barData.push({
          area: item.locationCode,
          value: item.stockQty,
          type:
            item.stockQty >= item.capacity
              ? 'Full'
              : item.stockQty / item.capacity > 0.9
              ? 'Large'
              : 'Basic'
        })
      })

      const annotations = []

      const arr = barData.filter((item) => item.type === 'Total')
      arr.forEach((item, k) => {
        const target = barData.find(
          (i) =>
            i.area === item.area && ['Basic', 'Full', 'Large'].includes(i.type)
        )
        const position =
          item.value + target.value < target.value
            ? target.value
            : item.value + target.value
        annotations.push({
          type: 'text',
          position: [k, position],
          content: `${item.capacity}`,
          style: { textAlign: 'center', fontSize: 14, fill: '#fff' },
          offsetY: -20
        })
      })

      const arr2 = barData.filter((item) =>
        ['Basic', 'Full', 'Large'].includes(item.type)
      )
      arr2.forEach((item, k) => {
        const target = barData.find(
          (i) => i.area === item.area && ['Total'].includes(i.type)
        )
        const realTotal = item.value + target.value
        const position =
          Math.floor(item.value / 2) < 1 ? 1 : Math.floor(item.value / 2)

        annotations.push({
          type: 'text',
          position: [k, position],
          content: `${item.value}\n${Number(
            ((item.value / realTotal) * 100).toFixed(0)
          )}% `,
          style: { textAlign: 'center', fontSize: 14, fill: '#fff' },
          offsetY: position % 2 === 1 ? -10 : 0
        })
      })
      chart.update({
        data: barData,
        annotations
      })
    }
  }, [chart, data])

  return (
    <div className={styles.container}>
      <header className={styles.ironHeader}>
        包装库区库存量：{areaStockQty}
      </header>
      <div id={inventoryMap[field]} className={styles.ironBox} />
      {/* {field === 'iron' && (
        <div id="inventory-iron" className={styles.ironBox} />
      )}
      {field === 'pack' && (
        <div id="inventory-pack" className={styles.ironBox} />
      )}
      {field === 'check' && (
        <div id="inventory-check" className={styles.ironBox} />
      )} */}
    </div>
  )
}
